import { Group, Rect, Text, Pen, Ellipse,ITextInputData } from "leafer-ui";
import { TextBox } from "../types";
const config = {
  text:{
    fontSize:26,
    strokeWidth:2,
    fontWeight:600,
  },
  box:{
    cornerRadius: 8,
  }
}
export const createTyposMark = (textBox: TextBox) => {
  const textGroup = new Group({
    button: true,
  });

  const box = new Rect({
    ...(textBox || {}),
    stroke: "#FF4C26",
    ...config.box,
  });
  textGroup.add(box);
  const newText = new Text({
    x: textBox.x + textBox.width +2,
    y: textBox.y - config.text.fontSize,
    text: "大",
    stroke: "#fff",
    fill: "red",
    ...(config.text as ITextInputData)
  });
  textGroup.add(newText);

  // 使用 Pen 绘制曲线
  const pen = new Pen();
  pen.setStyle({
    stroke: "red",
    strokeWidth: 0,
    fill: "none",
  });

  // 计算连接点
  const startX = textBox.x + textBox.width;
  const startY = textBox.y;
  // 绘制四分之一圆弧
  pen.add(
    new Ellipse({
      x: startX - 2,
      y: startY - 4,
      width: 6,
      height: 8,
      innerRadius: 1,
      startAngle: -180,
      endAngle: -90,
      stroke: "red",
      strokeWidth: 2,
      strokeAlign: "center",
      strokeCap: "round",
    })
  );
  textGroup.add(pen);

  return textGroup;
};
